import React, { useState, useEffect } from 'react'
import axios from '../../axios'
import { SystemQRcodeOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import styles from './My.module.css'
import sao from '../../assets/扫一扫.png'
import yang from '../../assets/金币商城.png'
import fang from '../../assets/访客记录.png'
import wo from '../../assets/我的.png'
import Ai from '../../assets/智能Ai.png'
export default function My() {
  const navigate = useNavigate()
  const [list, setList] = useState({})
  let id = localStorage.getItem('user')
  
  const getData = () => {
    axios.get('/index?id=' + id).then(res => {
      setList(res.data.data)
    })
  }
  
  useEffect(() => {
    getData()
  }, [])

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <div className={styles.avatarContainer}>
          <img 
            src={list.img } 
            alt="用户头像" 
            className={styles.avatar}
          />
        </div>
        
        <div className={styles.userInfo}>
          <h2 className={styles.username}>{list.userName || '用户名'}</h2>
        </div>
        
        <div className={styles.qrButton} onClick={() => navigate('/er')}>
          <SystemQRcodeOutline fontSize={24} />
        </div>
      </div>
     <div className={styles.gong}>
      <div className={styles.title}><b>功能操作</b></div>
      <div className={styles.functionGrid}>
        <div className={styles.functionItem} onClick={()=>{
          navigate('/sao')
        }}>
          <img src={sao} alt="扫一扫" className={styles.functionIcon} />
          <span className={styles.functionText}>扫一扫</span>
        </div>
        <div className={styles.functionItem} onClick={()=>{
          navigate('/deposit')
        }}>
          <img src={yang} alt="洋币" className={styles.functionIcon} />
          <span className={styles.functionText}>洋币</span>
        </div>
        <div className={styles.functionItem}>
          <img src={Ai} alt="Ai" className={styles.functionIcon} />
          <span className={styles.functionText}>不能说的秘密</span>
        </div>
        <div className={styles.functionItem} onClick={()=>{
          navigate('/xiu')
        }}> 
          <img src={wo} alt="我的信息" className={styles.functionIcon} />
          <span className={styles.functionText}>我的信息</span>
        </div>
      </div>
    </div>
    </div>
  )
}